import React, { Component } from 'react'
import { Layout, Button, message } from 'antd';
const { Content } = Layout;
const constraints = window.constraints = {
    audio: false,
    video: true
};
export default class P4_open_screen_share extends Component {
    screenShare = async (e) => {
        try {
            const stream = await navigator.mediaDevices.getDisplayMedia(constraints)
            this.handleSuccess(stream)

        } catch (e) {
            this.handleError(e)
        }
    }
    handleSuccess = (stream) => {
        const video = this.refs['video']
        const videoTracks = stream.getVideoTracks();
        console.log(`视频资源:${videoTracks[0].label}`)
        window.stream = stream
        video.srcObject = stream
    }
    handleError = (error) => {
        if (error.name === 'ConstraintNotSatisfiedError') {
            const v = constraints.video
            message.error(`宽:${v.width.exact} 高:${v.height.exact} 设备不支持`)
        } else if (error.name === 'PermissionDeniedError') {
            message.error('没有摄像头和麦克风使用权限,请点击允许按钮')
        }
        message.error(`getUserMedia错误: ${error.name}`, error)
    }
    render() {
        return (
            <div>
                <Content
                    className="site-layout-background"
                    style={{
                        padding: 24,
                        margin: 0,
                        minHeight: 700,
                    }}>
                    <video ref="video" weight="1024" height="700" playsInline autoPlay></video><br /><br />
                    <Button onClick={this.screenShare}>屏幕共享</Button>
                </Content>
            </div>
        )
    }
}
